<template>
	<view class="container">
		<!-- #ifdef MP || H5-->
		<view class="tui-edit-goods">
			<view>购物车共<text class="tui-goods-num">{{shopList.length}}</text>件商品</view>
			<view v-if="shopList.length>0">
				<tn-button :plain="true" shape="round" backgroundColor="#999" size="sm"
					@click="editGoods">{{isEdit?"完成":"编辑商品"}}</tn-button>
			</view>
		</view>
		<!-- #endif -->

		<view class="tui-cart-cell tui-mtop" v-if="!shopList || shopList.length<=0" style="padding: 100rpx 0;">
			<tn-empty mode="cart"></tn-empty>

		</view>


		<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in shopList" :key="index" v-else>
			<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
				<view class="tui-goods-item">
					<label class="tui-checkbox" @click="buyChange(item)">
				<!-- 		<checkbox v-model="item.id" :checked="item.selected" color="#fff">
						</checkbox> -->
						
						
						<image v-if="item.selected" src="https://oss.taoding1688.com/static/uniapp/static/commission/radiob.png" mode="widthFix"
							style="width: 50rpx;height: 50rpx;"></image>
						<image v-else src="https://oss.taoding1688.com/static/uniapp/static/commission/radio.png" mode="widthFix" style="width: 50rpx;height: 50rpx;">
						</image>
						
						
						
					</label>
					<image :src="info.app.cdnurl+item.goods.image" class="tui-goods-img" />
					<view class="tui-goods-info">
						<view class="tui-goods-title">
							{{ item.goods.title }}
						</view>
						<view class="tui-goods-model">
							<view class="tui-model-text" style="display: flex;">
								<view class="" v-for="(itemTitle,key) in item.sku_price.goods_sku_text" :key="key">
									{{itemTitle}}
								</view>
							</view>
						</view>
						<view class="tui-price-box">
							<view class="tui-goods-price" v-if="item.snapshot_price">￥{{item.snapshot_price | getPrice}}
							</view>
							<tn-number-box v-model="item.goods_num" @change="changeGoodNumber" :inputHeight="36"
								:fontSize="22" :inputWidth="64" :min="1" :index="index" positiveInteger></tn-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-divider :size="28" :bold="true" color="#333" width="50%">
			<text class="tn-icon-like tn-color-red"></text>
			<text class="tui-youlike">猜你喜欢</text>
		</tui-divider>
		<recommend />
		<view class="tui-tabbar" v-if="shopList.length>0">
			<view class="tui-checkAll">
					<label class="tui-checkbox" @click="checkAll">
						<image v-if="isAll" src="https://oss.taoding1688.com/static/uniapp/static/commission/radiob.png" mode="widthFix"
							style="width: 50rpx;height: 50rpx;"></image>
						<image v-else src="https://oss.taoding1688.com/static/uniapp/static/commission/radio.png" mode="widthFix" style="width: 50rpx;height: 50rpx;">
						</image>
						<text class="tui-checkbox-pl">全选</text>
					</label>
				<view class="tui-total-price" v-if="!isEdit">合计:<text class="tui-bold">￥{{totalPrice | getPrice}}</text>
				</view>
			</view>
			<view>
				<tn-button shape="round" backgroundColor="#eb0909" fontColor="#fff" v-if="!isEdit"
					@click="btnPay">去结算({{buyNum}})</tn-button>
				<tn-button :plain="true" shape="round" backgroundColor="#eb0909" fontColor="#eb0909"
					style="padding: 20rpx 50rpx;" @click="btnDelete" v-else>删除</tn-button>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>


		<t-pay-way :show="show" :payMoney="totalPrice | getPrice" @pay="pay" @close="popupClose"></t-pay-way>
	</view>
</template>

<script>
	import {
		getShopCart,
		postShopupdate,
		getShopCartDelete
	} from "@/apis/index.js"
	import tPayWay from "@/components/t-pay-way/t-pay-way"
	import recommend from '@/components/recommend.vue'
	export default {
		components: {
			tPayWay,
			recommend
		},
		data() {
			return {
				show: false,
				dataList: [{
					id: "t2020003120",
					buyNum: 2,
					price: 299.5,
					selected: false
				}, {
					id: 't1020003120',
					buyNum: 1,
					price: 499,
					selected: false
				}],
				isAll: false,
				totalPrice: 0,
				buyNum: 0,
				cartIds: [], //购物车id
				actions: [],
				actions2: [],
				isEdit: false,
				productList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				shopList: [],
				infos: {}
			}
		},
		filters: {
			getPrice(price) {
				price = Number(price) || 0;
				return price.toFixed(2)
			}
		},
		mounted() {

		},
		onShow() {
			this.infos = this.$store.state.info
			this.getShopList()
			this.isAll=false
		},
		methods: {
			popupClose() {
				this.show = false
			},
			btnDelete() {
				const trueIds = this.shopList.filter(item => item.selected).map(item => item.id);
				console.log(trueIds,'trueIds')
				if (trueIds.length>0) {
					getShopCartDelete(trueIds.toString()).then(res => {
						this.getShopList()
					})
				}else{
					uni.showToast({
						title:'请选择商品',
						icon:'none'
					})
				}
			},
			changeGoodNumber(e) {
				// this.shopList[e.index].type = 'cover'



				let obj = {

					goods_id: this.shopList[e.index].goods_id,
					goods_num: this.shopList[e.index].goods_num,
					goods_sku_price_id: this.shopList[e.index].goods_sku_price_id,
					type: "cover"
				}

				postShopupdate(obj).then(res => {
				})
				let buyNum = 0;
				let totalPrice = 0;
				this.shopList.map((item) => {
					// item.selected = this.isAll;
					if (item.selected) {
						buyNum += item.goods_num;
						totalPrice += Number(item.snapshot_price) * Number(item.goods_num);
					}
				})
				this.totalPrice = totalPrice;
				this.buyNum = buyNum;
			},
			async getShopList() {
				let res = await getShopCart()
				if (res.code == 1) {
					this.shopList = JSON.parse(JSON.stringify(res.data))

					this.shopList = this.shopList.map(item => ({
						...item,
						id: item.id.toString()
					}));






				}
			},
			calcHandle() {
				let buyNum = 0;
				let totalPrice = 0;
				let selectedNum = 0;
				this.shopList.map((item) => {
					if (item.selected) {
						buyNum += item.goods_num;
						totalPrice += Number(item.snapshot_price) * Number(item.goods_num);
						selectedNum++
					}
				})

				this.isAll = this.shopList.every(item => item.selected == true);






				// this.isAll = selectedNum === this.shopList.length
				this.buyNum = buyNum
				this.totalPrice = totalPrice
			},
			changeNum: function(e) {
				this.shopList[e.index].buyNum = e.value
				setTimeout(() => {
					this.calcHandle()
				}, 0)
			},
			handlerButton: function(e) {
				let index = e.index;
				let item = e.item;
				this.tui.toast(`商品id：${item.id}，按钮index：${index}`);
			},
			editGoods: function() {
				// #ifdef H5 || MP
				this.isEdit = !this.isEdit;
				// #endif
			},
			detail: function() {
				return
				uni.navigateTo({
					url: '/pages/index/productDetail/productDetail'
				})
			},
			btnPay() {
				if (this.buyNum) {
					const trueIds = this.shopList.filter(item => item.selected).map(item => item);
					let obj = {
						from: "cart",
						order_type: "goods",
						goods_list: trueIds
					}
					uni.navigateTo({
						url: `/templatePage/submitOrder/submitOrder?data=${JSON.stringify(obj)}`
					})
				}else{
					uni.showToast({
						title:'请选择商品',
						icon:'none'
					})
				}
				
			},
			buyChange(e) {
				this.cartIds = e.id;
				let buyNum = 0;
				let totalPrice = 0;
				this.shopList.map((item) => {
					if (Number(item.id) == Number(e.id)) {
						if (item.selected == true) {
							item.selected = false;
						} else {
							item.selected = true;
						}


						// item.selected =item.selected?false:true;
						if (item.selected) {
							buyNum += item.goods_num;
							totalPrice += Number(item.snapshot_price) * Number(item.goods_num);
						}
					}


				})
				this.totalPrice = totalPrice;
				this.buyNum = buyNum;
				setTimeout(() => {
					this.calcHandle()
				}, 0)
			},
			checkAll(e) {
				this.isAll = !this.isAll;
				let buyNum = 0;

				let totalPrice = 0;
				this.shopList.map((item) => {
					item.selected = this.isAll;
					if (this.isAll) {
						buyNum += item.goods_num;
						totalPrice += Number(item.snapshot_price) * Number(item.goods_num);
					}
				})
				this.totalPrice = totalPrice;
				this.buyNum = buyNum;
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onPullDownRefresh: function() {
			let loadData = JSON.parse(JSON.stringify(this.productList));
			loadData = loadData.splice(0, 10)
			this.productList = loadData;
			this.pageIndex = 1;
			this.pullUpOn = true;
			this.loadding = false
			uni.stopPullDownRefresh()
		},
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 4) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				let loadData = JSON.parse(JSON.stringify(this.productList));
				loadData = loadData.splice(0, 10)
				if (this.pageIndex == 1) {
					loadData = loadData.reverse();
				}
				this.productList = this.productList.concat(loadData);
				this.pageIndex = this.pageIndex + 1;
				this.loadding = false
			}
		},
		onNavigationBarButtonTap(e) {
			this.isEdit = !this.isEdit;
			let text = this.isEdit ? "完成" : "编辑";
			// #ifdef APP-PLUS
			let webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				text: text
			});
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 120rpx;
	}

	.tui-mtop {
		margin-top: 24rpx;
	}

	.tui-edit-goods {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 24rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-size: 24rpx;
	}

	.tui-goods-num {
		font-weight: bold;
		color: #e41f19;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.tui-checkbox {
		min-width: 70rpx;
		display: flex;
		align-items: center;
	}

	/* #ifdef MP-WEIXIN */
	.tui-checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #eb0909;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */

	>>>.tui-checkbox .uni-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	>>>.tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: #eb0909;
		width: 45rpx !important;
		height: 45rpx !important;
		border: none;
	}

	/* #endif */
	.tui-goods-img {
		width: 220rpx;
		height: 220rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}

	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		line-height: 30rpx;
		color: #333;
	}

	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.tui-goods-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-scale {
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}

	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 100rpx;
		box-sizing: border-box;
	}

	.tui-buy {
		display: flex;
		align-items: center
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-sub-info {
		max-width: 532rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 20rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
		color: #333;
		transform: scale(0.8);
		transform-origin: 100% center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: auto
	}

	.tui-invalid-text {
		width: 66rpx;
		margin-right: 4rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background: rgba(0, 0, 0, .3);
		transform: scale(0.8);
		transform-origin: center center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-gray {
		color: #B2B2B2 !important;
	}

	.tui-goods-invalid {
		color: #555;
		font-size: 24rpx;
	}

	.tui-flex-center {
		align-items: center !important;
	}

	.tui-invalid-ptop {
		padding-top: 40rpx;
	}

	.tui-tabbar {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		/* bottom: 165rpx; */
		/* #ifdef H5 */
		bottom: 50px;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		bottom: 0px;
		/* #endif */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 9999;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-price {
		padding-left: 30rpx;
		font-size: 30rpx !important;
	}

	/*猜你喜欢*/
	.tui-youlike {
		padding-left: 12rpx
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
</style>